import React, { useEffect, useState } from "react";
import { View, Text, Button, Form, Label, Input } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './products.less'
import { useUserState } from "../../utils";


export default () => {
  const [data, setData]: any = useState({
    name: ''
  })
  const [form, setForm] = useState({
    buyerName: '',
    buyerPhone: '',
    buyerNote: ''
  })
  const user =  useUserState()
  console.log(user)

  useEffect(() => {
    const q = Taro.getCurrentInstance().router?.params
    console.log(q)
    const id = q?.productId
    if (!id) {
      return
    }

    Taro.request({
      url: `${process.env.PREFIX}/product/detail/${id}`,
    }).then(r => {
      setData(r.data.data)
    })
  }, [])

  const submit = async () => {
    console.log(form)
    const d = await Taro.request({
      url: `${process.env.PREFIX}/order/create`,
      method: "POST",
      data: {...form, ...user}
    })
    
  }

  return (
    <View>
      <View> 商品信息: {data.name}</View>
      <View>
        <View>服务对象信息</View>
        <Input type='text' placeholder='将会获取焦点' focus />
        <Form onSubmit={submit}>
          <View>
            <Label>
              <Text>姓名</Text>
              <Input name='buyerName' type='text' value={form.buyerName} onInput={e => setForm({
                ...form, buyerName: e.detail.value
              })}
              />
            </Label>
          </View>
          <View>
            <Label>
              <Text>手机号</Text>
              <Input name='buyerPhone' type='text' value={form.buyerPhone} onInput={e => setForm({
                ...form, buyerPhone: e.detail.value
              })}
              />
            </Label>
          </View>
          <View>
            <Label>
              <Text>备注</Text>
              <Input name='buyerNote' type='text' value={form.buyerNote} onInput={e => setForm({
                ...form, buyerNote: e.detail.value
              })}
              />
            </Label>
          </View>
          {Taro.getEnv() === Taro.ENV_TYPE.WEAPP
            ? <Button formType='submit'>提交订单</Button>
            : <Button onClick={submit}>提交订单</Button>
          }
          <Button formType='submit'>提交订单</Button>
        </Form>
      </View>

      <View>
        <View>openId: {user.openid}</View>
        <View>剩余积分: {user.points}</View>

      </View>

    </View>
  )
}

